import React, {useCallback, useState} from 'react';

const Index = () => {
    const [myname, setname] = useState("kerwin")
    const [text, settext] = useState("")
    const [list,setList] = useState(["aa","bb","cc"])
    const handleChange = useCallback((event)=>{
        settext(event.target.value)
    })
    const handleAdd = useCallback(
        ()=>{
            console.log(text)

            // list.push("")
            setList([...list,text])

            //情况
            settext("")
        },
        [text,list]
    )

    const handleDel = useCallback(
        (index)=>{
            console.log(index)
            let newlist = [...list];
            newlist.splice(index,1)
            setList(newlist)
        },
        [list]
    )
    return (
        <div>
            {myname} - <button onClick={()=>{
            setname("xiaomng")
        }}>change-myname</button>

            <input onChange={handleChange}  value={text}/>
            <button onClick={handleAdd}>add</button>
            <ul>
                {
                    list.map((item,index)=>
                        <li key={item}>
                            {item}
                            <button onClick={()=>handleDel(index)}>del</button>
                        </li>
                    )
                }
            </ul>

            {!list.length  && <div>暂无待办事项</div>}
        </div>
    );
};

export default Index;
